<template>
    <fieldset>
    <legend>TODOLIST</legend>
        <Todoinput @add="todoadd"></Todoinput>
        <Todolist :data="newData" @del="tododel" @getFlag="handleGetFlag" :activeCount="activeCount" :completedCount="completedCount" :allCount="allCount"></Todolist>
    </fieldset>
</template>
<script setup>
    import Todoinput from "./todoinput.vue"
    import Todolist from "./todoList.vue"
    import {ref,computed} from "vue"
    let data = ref([
        {
            id:1,
            todo:"吃饭",
            isCompleted:false
        },
        {
            id:2,
            todo:"睡觉",
            isCompleted:true
        },
    ])
    
    let todoadd = (input)=>{
        console.log(input);

        let obj = {
            id:Math.random().toString(32).substring(2),
            todo:input,
            isCompleted:false
        }
        data.value.push(obj)
    }

    let tododel = (input)=>{
        console.log(input);
        data.value.splice(input,1)
    }

    let filterFlag = ref("all")
    let handleGetFlag = (flag) =>{
        console.log(flag);
        filterFlag.value = flag
    }

    let allCount = ref(0)
    let completedCount = ref(0)
    let activeCount = ref(0)


    let newData = computed(()=>{
        let all = data.value
        let completed = data.value.filter(item=>item.isCompleted)
        let active = data.value.filter(item=>!item.isCompleted)

        allCount.value = all.length
        completedCount.value = completed.length
        activeCount.value = active.length

        console.log(filterFlag.value);
        switch(filterFlag.value){
            case "all":
                return all
                case "completed":
                    return completed
                    case "active":
                        return active
        }
    })
</script>